<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>订单信息</title>

    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->

    <!--引入字体图标相关的样式文件-->
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"><!---->
    <!--引入Font Awesome框架实现字体图标效果-->
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <!--引入外部css文件,首页样式-->
    <link rel="stylesheet" href="css/index.css">
    <!--引入外部css文件,登录样式-->
    <link rel="stylesheet" href="css/orderList.css">
    <!--引入iconfont字库-->
    <link rel="stylesheet" href="//at.alicdn.com/t/font_2932829_gw0c9i9k6gd.css">
    <!--引入jQuery框架文件,使用CDN服务器进行引入-->
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <!--引入vue框架-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<!--头部标签-->
<header id="miao">
    <div class="header">
        <!--上导航条-->
        <div class="header-top" style="position: absolute;width: 100%">
            <!--手机下单二维码-->
            <div></div>
            <!--关注微信二维码-->
            <div></div>
            <div class="container" style="width: 1168px">
                <!--左div-->
                <div class="con-left">
                    <p class="text-color-9">嗨，欢迎来订花乐！</p>
                    <a href="">
                        <!--微信图标-->
                        <i class=" iconfont icon-floristweixin" style="color: rgb(136,78,34);"></i>
                        <span class="text-color-9">关注微信</span>
                    </a>
                </div>
                <!--右div-->
                <div class="con-right">
                    <a href="" class="text-color-9">你好，请登录</a>
                    <span class="text-color-9">|</span>
                    <a href="" class="text-color-9">免费注册</a>
                    <span class="text-color-9">|</span>
                    <a href="" class="text-color-9">订单查询</a>
                    <span class="text-color-9">|</span>
                    <a href="" class="text-color-9">
                        <!--购物车图标-->
                        <i class="iconfont icon-floristgouwuche" style="color: rgb(136,78,34);"></i>
                        <span class="text-color-9">购物车</span>
                        <span class="text-color-9">(0)</span>
                    </a>
                    <span class="text-color-9">|</span>
                    <a href="#" class="text-color-9">手机下单</a>
                </div>
            </div>
        </div>
        <!--下导航条-->
        <div class="header-bottom">
            <!--搜索栏-->
            <div class="container" style="width: 1168px">
                <!--商标-->
                <div class="logo-img">
                    <a href="">
                        <img src="images/logo.png" alt="网页logo">
                    </a>
                </div>
                <div class="phone-search">
                    <p class="phone-search-text">
                        <i class="glyphicon glyphicon-phone-alt" style="color: rgb(136,78,34) ;font-size: 22px;"></i>
                        <span class="text-color-9" style="font-size: 17px;">400-0606-1520</span>
                    </p>
                </div>
            </div>
            <!--分类栏-->
            <div class="container" id="subject" style="height: 35px">

            </div>
        </div>
    </div>
</header>
<!--头部标签结束-->
<!--订单信息区域开始-->
<div class="content-all">
    <div class="contenta">
        <!-- 填写订单信息区域 -->
        <div class="order-item">
            <div class="orderItem-title">
                <p>填写订单信息</p>
            </div>
            <div class="orderItem-cont">
                <div class="clearfix">
                    <p class="fh" style="font-size: 16px;line-height: 1.5;"> 收货人信息</p>
                    <div onclick="openaddressList()" class="fr addressBtn pointercurser">
                        <i class="iconfont icon-floristxinzengdizhi"></i>
                        <span>新增收货地址</span>
                    </div>
                </div>
                <div id="addaddressitem">
                </div>
            </div>
            <div class="orderItem-contBottom">
                <div class="clearfix">
                    <p class="fh" style="font-size: 16px;line-height: 1.5;">订购人信息</p>
                </div>
                <div class="order-info">
                    <div class="order-name">
                        <label style="color: #333;"><label class="redFontaaa">*</label>姓名:</label>
                        <input autocomplete="off" id="ordernamemc" type="text" placeholder="订购人名称">
                    </div>
                    <div class="order-tel">
                        <label style="color: #333;"><label class="redFontaaa">*</label>电话:</label>
                        <input autocomplete="off" id="ordernametel" type="text" placeholder="联系方式">
                        <text id="ordernameteltishikuan" class="redFonttishi"></text>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="contenta">
        <!--填写配送信息区域-->
        <div class="order-item">
            <div class="orderItem-title">
                <p>配送信息</p>
            </div>
            <div class="orderItem-cont">
                <div class="info-input clearfix">
                    <div class="input-group">
                        <label style="color: #333; font-size: 16px"><label class="redFontaaa">*</label>送达日期:</label>
                        <input type="date" readonly="" class="layui-input" id="date" style="width: 140px; display: inline-block !important;" lay-key="1">
                        <select name="" id="shiduanId" class="selectInput">
                            <option value="1">不限时间</option>

                            <option value="2">8:00-10:00</option>

                            <option value="3">10:00-12:00</option>

                            <option value="4">12:00-14:00</option>

                            <option value="5">14:00-16:00</option>

                            <option value="6">16:00-18:00</option>

                            <option value="7">18:00-20:00</option>

                            <option value="8">20:00-22:00</option>

                            <option value="15">上午</option>

                            <option value="16">下午</option>

                            <option value="17">晚上</option>

                        </select>
                        <select name="" id="shiqufeiyong" class="selectInput" onchange="handleFreightChange();">
                            <option data-price="0" data-id="1" value="0">市区免费配送</option>

                            <option data-price="30.00" data-id="2" value="30.00">
                                近郊+30.00运费
                            </option>

                            <option data-price="50.00" data-id="3" value="50.00">
                                远郊+50.00运费
                            </option>

                        </select>
                    </div>
                </div>
            </div>
            <div class="orderItem-cont">
                <div class="ordliuyan">
                    <div class="greetting-mess">
                        <p style="font-size: 16px;color: #333;">贺卡留言</p>
                    </div>
                    <div class="greetting-content">
                        <div class="greetting-levamess">
                            <textarea id="kapianliuyanId" rows="6" cols="60" maxlength="200" placeholder="填写留言，最多可填写200字。"></textarea>
                        </div>
                    </div>
                </div>
                <div class="ordliuyan">
                    <div class="greetting-mess">
                        <p style="font-size: 16px;color: #333;">买家留言</p>
                    </div>
                    <div class="greetting-content">
                        <div class="greetting-levamess">
                            <textarea id="maijialiuyan" rows="6" cols="60" maxlength="200" placeholder="选填,请注明需求，120字以内"></textarea>
                        </div>
                    </div>
                </div>

            </div>

            <div class="orderItem-contBottom">
                <div class="invoice-mess">
                    <label class="invoice-messlabel"><input name="invoiceMessa" id="fapiaoxinxiopentype" type="checkbox" value="">&nbsp;&nbsp;发票信息</label>
                    <div class="invoice-cont">
                        <div class="invoice-title">
                            <p>电子发票将于付款后1-7个工作日内开具，并发送到电子邮箱。发票类型为普通发票，发票内容为服务费，如有其他要求，请联系客服。</p>
                        </div>
                        <div class="invoice-maincont">
                            <div class="invoice-radio">
                                <label><input type="radio" id="danweiradio" onclick="clickradioValueselect()" value="unit" name="unit">&nbsp;&nbsp;单位</label>
                                <label><input type="radio" id="personalradio" onclick="clickradioValueselect()" value="personal" name="personal">&nbsp;&nbsp;个人</label>
                            </div>
                            <div class="invoice-unitInfo">
                                <div class="invoice-labelConta">
                                    <label id="danweiquanselectTitle">发票抬头:&nbsp;&nbsp;</label>
                                    <input id="danweiquancheng" placeholder="请发票抬头">
                                </div>
                                <div class="invoice-labelCont" id="nashuirenshibiehaoa">
                                    <label>纳税人识别号:&nbsp;&nbsp;</label>
                                    <input id="nashuirenshibiehao" placeholder="纳税人识别号">
                                </div>
                                <div class="invoice-labelConta">
                                    <label>手机号码:&nbsp;&nbsp;</label>
                                    <input id="nashuirenshoujihao" placeholder="手机号码">
                                    <text id="nashuirenshoujihaotishi" class="redFonttishi displayblockclass"></text>
                                </div>
                                <div class="invoice-labelCont">
                                    <label>电子邮箱:&nbsp;&nbsp;</label>
                                    <input id="nashuirendianziyouxiang1" placeholder="电子邮箱">
                                    <text id="nashuirendianziyouxiang1tishi" class="redFonttishi displayblockclass"></text>
                                </div>
                            </div>
                            <div class="reset-mess">

                            </div>
                        </div>
                    </div>
                </div>


            </div>
        </div>

        <div class="contenta margintoppx">
            <!-- 核对购物清单区域 -->
            <div class="order-item">
                <div class="orderItem-title">
                    <p>核对购物清单</p>
                </div>

                <div class="orderItem-shopping">
                    <div class="shopping-image">
                        <img src="https://upyun.dinghuale.com/uploads/20210426/202104260950064701.jpg">
                    </div>
                    <div class="shopping-message">
                        <div class="shopping-priceone">
                            <p>此生不渝</p>
                        </div>
                        <div class="shopping-pricetwe">
                            <p>数量:&nbsp;X1</p>
                        </div>
                    </div>
                    <div class="shopping-price clearfix">
                        <div class="shopping-priceone">
                            <p>店铺价:</p>
                            <p class="red-font order-price" data-id="" data-price="259" data-old-price="168.00" data-current-price="168" data-old-current-price="259.00" data-title="此生不渝" data-pid="196" data-num="1" data-apply-price="168">￥168</p>
                            <p></p>
                        </div>
                    </div>
                </div>


                <div class="contenta margintoppx">
                    <!--订单提交-->
                    <div class="order-item contentsubmit-goods">
                        <div class="submit-goods">
                            <p>共</p>
                            <p id="num" class="red-font fontsize-goods">1</p>
                            <p>件商品</p>
                        </div>
                        <div class="submit-goods">
                            <p>总金额:</p>
                            <p>
                                ￥<span id="total" class="text-danger">168.00</span>
                            </p>
                        </div>
                        <div class="submit-goods">
                            <p>配送费:</p>
                            <p>￥
                            </p><p id="peisongfeiIdclass">0</p>
                            <p></p>
                        </div>
                        <div class="submit-goods">
                            <p>优惠券:</p>
                            -￥<p id="submitgoodscoup">0</p>
                        </div>
                        <div class="submit-goods" style="width: 264px;">
                            <label>支付方式:</label>
                            <label>
                                <input name="payzhifu" type="radio" value="2" checked="">
                                <img src="https://upyun.dinghuale.com/public/images/weixin.png" alt="" class="zhifu-pic">
                                微信
                            </label>
                            &nbsp; &nbsp;
                            <label>
                                <input name="payzhifu" type="radio" value="1">
                                <img src="https://upyun.dinghuale.com/public/images/zhifuboa.png" alt="" class="zhifu-pic">
                                支付宝
                            </label>
                        </div>
                        <div class="submit-goods">
                            <p>实付款:</p>
                            <p class="red-font fontsize-goods" id="resultMoneyid" style="color: #ff2222;font-weight: bold;">168.00</p>
                        </div>
                        <div class="submit-goods submit-goodsbutton pointercurser">
                            <div onclick="addOrderItem()" class="a-colorfont">提交订单</div>
                        </div>
                    </div>
                </div>
                <div class="mask-page" id="addresspoup">
                    <!--遮罩区域-->
                    <div class="mask-content">
                        <div class="mask-title">
                            <p>新增收货人地址</p>
                            <i class="iconfont icon-guanbi" onclick="closeaddresspoun()"></i>
                        </div>
                        <div class="mask-maincont">
                            <div class="top-mess">
                            </div>
                            <div class="forminput-mask">
                                <label class="redFontaaa">*</label>
                                <label>收货人姓名：</label>
                                <input id="shohuorenname" autocomplete="off" placeholder="请输入姓名" type="text">
                                <p id="shohuorennametishi" class="redFonttishi"></p>
                            </div>
                            <div class="forminput-mask">
                                <label class="redFontaaa">*</label>
                                <label>收货人电话：</label>
                                <input id="shouhuorentel" autocomplete="off" placeholder="请输入电话" type="text">
                                <p id="shouhuorenteltishi" class="redFonttishi"></p>
                            </div>
                            <div class="forminput-mask">
                                <label class="redFontaaa">*</label>
                                <label>收货人地址：</label>
                                <div class="select-div">
                                    <select id="selProvince2" name="selProvince2">

                                        <option value="">省份</option><option value="0">北京</option><option value="1">天津</option><option value="2">河北</option><option value="3">山西</option><option value="4">内蒙古</option><option value="5">辽宁</option><option value="6">吉林</option><option value="7">黑龙江</option><option value="8">上海</option><option value="9">江苏</option><option value="10">浙江</option><option value="11">安徽</option><option value="12">福建</option><option value="13">江西</option><option value="14">山东</option><option value="15">河南</option><option value="16">湖北</option><option value="17">湖南</option><option value="18">广东</option><option value="19">广西</option><option value="20">海南</option><option value="21">重庆</option><option value="22">四川</option><option value="23">贵州</option><option value="24">云南</option><option value="25">西藏</option><option value="26">陕西</option><option value="27">甘肃</option><option value="28">青海</option><option value="29">宁夏</option><option value="30">新疆</option><option value="31">台湾</option><option value="32">香港</option><option value="33">澳门</option><option value="34">海外</option></select>

                                </div>
                                <div class="select-div">
                                    <select id="selCity2" name="selCity2">
                                        <option value="">地级市</option><option value="1">成都市</option><option value="2">自贡市</option><option value="3">攀枝花市</option><option value="4">泸州市</option><option value="5">德阳市</option><option value="6">绵阳市</option><option value="7">广元市</option><option value="8">遂宁市</option><option value="9">内江市</option><option value="10">乐山市</option><option value="11">南充市</option><option value="12">眉山市</option><option value="13">宜宾市</option><option value="14">广安市</option><option value="15">达州市</option><option value="16">雅安市</option><option value="17">巴中市</option><option value="18">资阳市</option><option value="19">阿坝藏族羌族自治州</option><option value="20">甘孜藏族自治州</option><option value="21">凉山彝族自治州</option></select>
                                </div>
                                <div class="select-div">
                                    <select id="selArea2" name="selArea2">
                                        <option value="">市、县</option><option value="1">锦江区</option><option value="2">青羊区</option><option value="3">金牛区</option><option value="4">武侯区</option><option value="5">成华区</option><option value="6">龙泉驿区</option><option value="7">青白江区</option><option value="8">新都区</option><option value="9">温江区</option><option value="10">金堂县</option><option value="11">双流县</option><option value="12">郫县</option><option value="13">大邑县</option><option value="14">蒲江县</option><option value="15">新津县</option><option value="16">都江堰市</option><option value="17">彭州市</option><option value="18">邛崃市</option><option value="19">崇州市</option><option value="20">其它区</option></select>
                                </div>
                            </div>
                            <div class="forminput-mask">
                                <label style="margin-left: 16px;" class="redFontaaa">*</label>
                                <label>详细地址：</label>
                                <input id="addressvalue" autocomplete="off" placeholder="请填入详细地址">
                                <p id="addressvaluetishi" class="redFonttishi"></p>
                            </div>

                            <div class="forminput-mask">
                                <label style="margin-left: 22px;">设为默认：</label>
                                <input style=" height: 16px;width: 4%;" type="radio" checked="true" id="isdefaultaddress" onclick="radiosinglecheck()">
                            </div>
                            <div class="formbutton-mask">
                                <div class="formbuttontwe-mask pointercurser" onclick="resetAdressItem()">
                                    保存
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!--订单信息区域结束-->
<!--尾部区域开始-->
<footer>
    <div class="footer" style="margin-top: 10px;">
        <!--尾部上区域-->
        <div class="footer-top" style="background: #fff;">
            <div class="footer-top-all container" style="height: 210px;width: 1200px">
                <div class="logo-img">
                    <img src="images/logo.png" alt="">
                </div>
                <div class="nav-module" style="height: 210px">
                    <div class="footer-module fl">
                        <p>热门导航</p>
                        <div>
                            <a href="">网站首页</a>
                            <a href="">爱情鲜花</a>
                            <a href="">订单查询</a>
                            <a href="">全部商品</a>
                        </div>
                    </div>
                    <div class="footer-module fl">
                        <p>客户服务</p>
                        <div>
                            <div class="footer-nav fl">
                                <a href="">关于我们</a>
                                <a href="">服务声明</a>
                                <a href="">订花流程</a>
                                <a href="">支付方式</a>
                            </div>
                            <div class="footer-nav fl" style="margin-left: 20px">
                                <a href="">配送说明</a>
                                <a href="">售后服务</a>
                                <a href="">隐私条款</a>
                                <a href="">联系我们</a>
                            </div>
                        </div>
                    </div>
                    <div class="footer-module fl" style="border:none">
                        <p>联系我们</p>
                        <div class="footer-nav">
                            <a href="">意见反馈</a>
                            <a href="">工作时间:07:00-23:00</a>
                            <a href="">7*24小时在线订购</a>
                            <a href="">全国热线:400-060-1520</a>
                        </div>
                    </div>
                    <div class="erweima fr">
                        <div class="erweima-img">
                            <img src="images/QRCode.jpg" alt="">
                        </div>
                        <p class="text-color-9">扫码关注微信</p>
                    </div>
                </div>
            </div>
        </div>
        <!--尾部下区域-->
        <div class="footer-bottom">
            <p class="text-color-9">Copyright©2020 &nbsp;成都勿忘我科技有限公司 &nbsp;
                <a href="https://beian.miit.gov.cn">蜀ICP备20016463号-2</a>
            &nbsp;</p>
        </div>
    </div>
</footer>
<!--尾部区域结束-->
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
</body>
</html>